<script setup>
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import api from '@/apis'
import { showNotify } from 'vant'
const { t } = useI18n()
const show = ref(false)

let userInfo = ref({})
let teamList = ref([])
let init = async () => {
  api.home.teamList().then(res => {
    teamList.value = res
  })
  const res = await api.home.userInfo()
  userInfo.value = res
}
onMounted(() => {
  // init()
})

// 复制内容到剪贴板
const copyContent = async (content, type) => {
  const targetUrl = window.location.href
  const urlObj = new URL(targetUrl)
  let text = urlObj.origin + "/#/index?code=" + content
  try {
    await navigator.clipboard.writeText(text)
    showNotify({ type: 'success', message: '复制成功' })
    return true
  } catch (err) {
    // 如果不支持Clipboard API，使用备用方法
    if (type === 'html') {
      // HTML内容使用execCommand无法直接复制
      throw new Error('浏览器不支持HTML复制')
    }
    return fallbackCopyText(text)
  }
}

// 备用复制方法
const fallbackCopyText = (text) => {
  return new Promise((resolve, reject) => {
    const textarea = document.createElement('textarea')
    textarea.value = text
    textarea.style.position = 'fixed'
    textarea.style.top = '0'
    textarea.style.left = '0'
    textarea.style.opacity = '0'
    document.body.appendChild(textarea)

    try {
      textarea.select()
      const success = document.execCommand('copy')
      document.body.removeChild(textarea)

      if (success) {
        showNotify({ type: 'success', message: '复制成功' })
        resolve(true)
      } else {
        reject(new Error('execCommand复制失败'))
      }
    } catch (err) {
      document.body.removeChild(textarea)
      reject(err)
    }
  })
}
</script>
<template>
  <div class="container">
    <div class="body pt-86px">
      <div class="ml-16 top">
        <div class="flex items-center pos-relative z-1">
          <div class="py-26 px-4 bg-[#fff]/50 rounded-[10px] flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 36 36" fill="none">
              <path d="M7.3055 18.5279L20.5719 4.24121H26.6948L13.4285 18.5279L26.6948 31.7938H20.5719L7.3055 18.5279Z"
                fill="black" />
            </svg>
          </div>
          <div class="ml-12">
            <div class="mb-8 text-16px text-[#000]/50 font-450 font-miSans line-height-20px">
              Invite Friends
            </div>
            <div class="mb-8 text-26px text-[#000] font-700 font-miSans line-height-20px">
              RWA邀请好友
            </div>
          </div>
        </div>
      </div>
      <div class="px-16 mt-32px">
        <div class="h-126 user pr-134px py-18 pl-20px mb-16">
          <div class="text-[#fff]/60 text-12px font-700 font-miSans mb-4">我的邀请码</div>
          <div class="text-[#fff] text-20px font-700 font-miSans mb-12">{{ userInfo?.code||'--' }}</div>
          <div class="flex">
            <div class="flex items-center py-6 bg-[#88F968] rounded-4444px pl-24px pr-8px van-haptics-feedback"
              @click="() => copyContent(userInfo?.code||'')">
              <div class="text-12px text-[#000] font-450 font-miSans van-haptics-feedback">
                复制
              </div>
              <div class="flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32" fill="none">
                  <g opacity="0.6">
                    <path
                      d="M22.6131 16.3265L14.4097 7.49219H10.6235L18.8269 16.3265L10.6235 24.5296H14.4097L22.6131 16.3265Z"
                      fill="black" />
                  </g>
                </svg>
              </div>
              <div class="flex items-center justify-center" style="margin-left: -8px">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32" fill="none">
                  <path
                    d="M22.6131 16.3265L14.4097 7.49219H10.6235L18.8269 16.3265L10.6235 24.5296H14.4097L22.6131 16.3265Z"
                    fill="black" />
                </svg>
              </div>
            </div>
          </div>
          <div
            class="bg-[url('/src/assets/imgs/community/top_right_bg.png')] w-136 h-136 bg-[length:100%] absolute right-0 top-[-32px]">
          </div>
        </div>
        <div class="p-16 rounded-16px bg-[#fff]/90 mb-16">
          <div class="flex items-center justify-between mb-10">
            <div class="text-[#000] text-14px font-630 font-miSans">我的ID</div>
            <div class="flex items-center" @click="() => copyContent('111')">
              <div class="text-[#46C124] text-14px font-630 font-miSans mr-6px">WADADSDA</div>
              <div class="flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 27 27" fill="none">
                  <path
                    d="M7.875 6.75V3.375C7.875 3.07663 7.99353 2.79048 8.2045 2.5795C8.41548 2.36853 8.70163 2.25 9 2.25H22.5C22.7984 2.25 23.0845 2.36853 23.2955 2.5795C23.5065 2.79048 23.625 3.07663 23.625 3.375V19.125C23.625 19.4234 23.5065 19.7095 23.2955 19.9205C23.0845 20.1315 22.7984 20.25 22.5 20.25H19.125V23.625C19.125 24.246 18.6187 24.75 17.9921 24.75H4.50787C4.35952 24.7509 4.21245 24.7225 4.07511 24.6663C3.93778 24.6102 3.81289 24.5275 3.70762 24.423C3.60234 24.3184 3.51877 24.1941 3.46169 24.0572C3.40461 23.9202 3.37515 23.7734 3.375 23.625L3.37838 7.875C3.37838 7.254 3.88463 6.75 4.51013 6.75H7.875ZM10.125 6.75H19.125V18H21.375V4.5H10.125V6.75ZM7.875 12.375V14.625H14.625V12.375H7.875ZM7.875 16.875V19.125H14.625V16.875H7.875Z"
                    fill="#46C124" />
                </svg>
              </div>
            </div>
          </div>
          <div class="flex items-center justify-between">
            <div class="text-[#000]/50 text-10px font-330 font-miSans">推荐人邀请码</div>
            <div class="flex items-center">
              <div class="text-[#000]/50 text-10px font-330 font-miSans">WADADSDA</div>
            </div>
          </div>
        </div>
        <div class="rounded-[16px] px-14 pt-14px pb-28px bg-[#fff] mb-16">
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <div
                class="bg-[#88F968] rounded-[8px] px-18 py-6 text-12px text-[#000] font-630 font-miSans line-height-20px">
                我的等级
              </div>
              <div class="text-18px text-[#000] font-700 font-miSans line-height-20px ml-12">
                {{ userInfo.rank_name || "VIP0" }}
              </div>
            </div>
            <div class="text-12px text-[#000] font-450 font-miSans line-height-20px">身份：{{ userInfo.node_rank_name ||
              '-'
              }}
            </div>
          </div>
          <div class="mt-10px mb-14 bg-[#000]/10 h-1"></div>
          <div class="flex items-center mb-20">
            <div class="w-33% flex items-center justify-start flex-col">
              <div class="text-12px text-[#000]/50 font-330 font-miSans line-height-16px mb-6">
                个人挖矿算力
              </div>
              <div class="text-16px text-[#000] font-520 font-miSans line-height-16px">{{ userInfo.mine_power || '--' }}
              </div>
            </div>
            <div class="h-30 w-1 bg-[#000]/10"></div>
            <div class="w-33% flex items-center flex-col">
              <div class="text-12px text-[#000]/50 font-330 font-miSans line-height-16px mb-6">
                个人铸币算力
              </div>
              <div class="text-16px text-[#000] font-520 font-miSans line-height-16px">{{ userInfo.cast_power || '--' }}</div>
            </div>
            <div class="h-30 w-1 bg-[#000]/10"></div>
            <div class="w-33% flex items-center justify-start flex-col">
              <div class="text-12px text-[#000]/50 font-330 font-miSans line-height-16px mb-6">
                团队挖矿算力
              </div>
              <div class="text-16px text-[#000] font-520 font-miSans line-height-16px">{{ userInfo.team_power || '--' }}</div>
            </div>
            <!-- <div class="h-30 w-1 bg-[#000]/10"></div> -->
          </div>
          <div class="flex items-center mb-20">
            <div class="w-33% flex items-center flex-col">
              <div class="text-12px text-[#000]/50 font-330 font-miSans line-height-16px mb-6">
                团队铸币算力
              </div>
              <div class="text-16px text-[#000] font-520 font-miSans line-height-16px">{{ userInfo.team_cast || '--' }}</div>
            </div>
            <div class="h-30 w-1 bg-[#000]/10"></div>
            <div class="w-33% flex items-center flex-col">
              <div class="text-12px text-[#000]/50 font-330 font-miSans line-height-16px mb-6">
                个人节点业绩
              </div>
              <div class="text-16px text-[#000] font-520 font-miSans line-height-16px">{{ userInfo.self_node || '--' }}</div>
            </div>
            <div class="h-30 w-1 bg-[#000]/10"></div>
            <div class="w-33% flex items-center flex-col">
              <div class="text-12px text-[#000]/50 font-330 font-miSans line-height-16px mb-6">
                团队节点业绩
              </div>
              <div class="text-16px text-[#000] font-520 font-miSans line-height-16px">{{ userInfo.team_node || '--' }}</div>
            </div>
          </div>
          <div class="flex items-center mb-20">
            <div class="w-33% flex items-center flex-col">
              <div class="text-12px text-[#000]/50 font-330 font-miSans line-height-16px mb-6">
                直推人数
              </div>
              <div class="text-16px text-[#000] font-520 font-miSans line-height-16px">{{ userInfo.zhi_num || '--' }}</div>
            </div>
            <div class="h-30 w-1 bg-[#000]/10"></div>
            <div class="w-33% flex items-center flex-col">
              <div class="text-12px text-[#000]/50 font-330 font-miSans line-height-16px mb-6">
                团队人数
              </div>
              <div class="text-16px text-[#000] font-520 font-miSans line-height-16px">{{ userInfo.team_num || '--' }}</div>
            </div>
          </div>
        </div>
        <div class="px-16 pt-12px pb-36px list_bg">
          <div class="text-14px text-[#000] font-630 font-miSans line-height-12px mb-16">
            邀请记录
          </div>
          <div class="item py-12px" v-for="item in teamList" :key="item.created_at">
            <div class="flex items-center justify-between mb-6">
              <div class="text-14px text-[#000] font-520 font-miSans">{{ item.address || '--' }}</div>
              <div class="text-14px text-[#46C124] font-630 font-miSans">+{{ item.self_yeji || '--' }}U</div>
            </div>
            <div class="flex items-center justify-between">
              <div class="text-10px text-[#000]/50 font-330 font-miSans">
                注册时间：{{ item.created_at || '--' }}
              </div>
              <div class="text-12px text-[#000]/50 font-330 font-miSans">业绩</div>
            </div>
          </div>
          <van-empty v-if="!teamList.length" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
            image-size="80" description="暂无记录" />
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.van-hairline--surround {
  padding: 6px 10px;
  border-radius: 6px;
}

.container {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(173deg, #fafafc 5.44%, #e3e4ea 68.12%, #fff 95.98%);

  // padding-top: calc(220px / 2);
  // height: 100vh;
  // display: flex;
  // flex-direction: column;
  // background-color: #f5f5f5;
  .body {
    width: 100%;
    position: relative;
  }
}

.top {
  position: relative;
}

.user {
  position: relative;
  background: url('/src/assets/imgs/community/top_bg.png') no-repeat;
  background-size: 100% 100%;
}

.item {
  border-top: 1px solid rgba($color: #000000, $alpha: 0.1);
}

.list_bg {
  min-height: calc(747px / 2);
  background: url('/src/assets/imgs/community/list_bg.png') no-repeat;
  background-size: 100% 100%;
}
</style>
